<template>
	<div style="padding-top:50px;">
		<TopWithBack></TopWithBack>
    <div class="updatepassword_box">
        <input type="tel" id="phone" placeholder="请输入您的手机号" value="" v-model='telpahone'/>
    </div>
    <div class="index_divide"></div>
    <div class="updatepassword_idetity_box">
        <input type="text" id="phoneverify" name="phoneverify" placeholder="请输入验证码" v-model="code"/>
         <button type="button" id="sendvf" v-if="timer==0" @click="send_message">发送验证码</button>
          <button type="button" id="sendvf" v-else style="width:160px;">({{timer}})秒后重新发送</button>
    </div>
    <div class="index_divide"></div>
  <!--   <div class="updatepassword_box">
        <input type="text" name="pwdtwo" id="pwdtwo" placeholder="请输入您的新电话" v-model='newtel'/>
    </div> -->
    <div class="update_btn" @click="makeSure"><input type="submit" value="修改"></div>
  </div>
</template>
<script>
import TopWithBack  from './../common/TopWithBack.vue'
import { updatePhone } from '@/api/allapis'
import { sendmessage } from'@/api/login'
export default{
  name: 'UpTel',
  data(){
    return{
      telpahone:'',
      code:'',
      timer:0,
      count:60,
      verify:''//接受传过来的code
    }
  },
  components:{
  	TopWithBack,
  },
  methods:{
    //发送验证码
     send_message:function(){
      if(this.timer>0){
        return false;
      }
      if(this.telpahone==''){
        alert("请输入您的手机号");
        return;
      }
      if(!(/^1[3|4|5|8]\d{9}$/.test(this.telpahone))){
        alert("手机号有误，请重新输入！");
        return;
      }
      var tenp_count = this.count;
      this.timer = tenp_count;
      var self = this
      var countimer = setInterval(function(){
        if(self.timer==0){
          clearInterval(countimer);
          return
        }else{
          self.timer=self.timer-1;
        }

      },1000)
      let param = {
        phone:this.telpahone,
        check:2
      }
      sendmessage(param).then(response=>{
        console.log(JSON.stringify(response))
        this.verify = response.data.code
      })

    },
    //验证手机号
    makeSure:function(){
      var telpahone=this.telpahone
      var code= this.code
      if(this.telpahone==''){
        alert("请输入您的手机号");
        return;
      }
      if(!(/^1[3|4|5|8]\d{9}$/.test(this.telpahone))){
        alert("手机号有误，请重新输入！");
        return;
      }
      if(code==''){
        alert('请输入验证码');
        return
      }
      if(this.verify!== this.code){
         alert('你输入的验证码有误');
         return
      }
      let param = {
        phone:this.telpahone,
        verify:this.code
      }
      updatePhone(param).then(response=>{
        alert(response.msg)
        this.$store.dispatch('updateTel',response.data.mytoken).then(() => {
          // console.log('1')
          this.$router.go(-1)
        }).catch((err) => {
          console.log(err)
        })
      })

    },

  },
}
</script>
<style>

</style>



